<template>
  <div class="container">
    <!-- 抄表记录 -->
    <!-- 查询条件 -->
    <el-form :inline="true" class="tableSearchBox hasPrint" size="medium">
      <!-- 实际为水表编号查询 -->
      <el-form-item label="用户编号：">
        <el-input v-model.trim="search.meterID" placeholder="请输入用户编号" @keyup.enter.native="getSearchData" clearable />
      </el-form-item>
      <el-form-item label="用户姓名：">
        <el-input v-model.trim="search.meterUserName" placeholder="请输入用户姓名" @keyup.enter.native="getSearchData"
          clearable />
      </el-form-item>
      <el-form-item label="小区：">
        <el-select v-model="search.villageID" filterable :filter-method="villageFilter" clearable
          placeholder="请输入或选择查询小区" @focus="villageFocus">
          <el-option v-for="item in villageList" :key="item.villageID" :label="item.villageName"
            :value="item.villageID"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用水类型：">
        <el-select v-model="search.waterRateID" clearable placeholder="请选择用水类型">
          <el-option v-for="(item,index) in waterRateList" :key="index" :label="item.waterRateName"
            :value="item.waterRateID"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="抄表员：">
        <el-select v-model="search.readerName" clearable placeholder="请选择抄表员">
          <el-option v-for="(item,index) in meterReaderList" :key="index" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="录入员：">
        <el-select v-model="search.readerName" clearable placeholder="请选择录入员">
          <el-option
            v-for="(item,index) in meterReaderList"
            :key="index"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item label="收费状态：">
        <el-select v-model="search.meterReadingRecordStatus" clearable placeholder="请选择状态">
          <el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账期：">
        <el-date-picker class="form_input" v-model="search.period" type="month" value-format="yyyy-MM"
          placeholder="请选择账期"></el-date-picker>
      </el-form-item>
      <el-form-item label="用水量：">
        <el-input v-model="search.currWaterCountMin" placeholder="最小值" type="number" clearable class="num_input">
        </el-input>-
        <el-input v-model="search.currWaterCountMax" placeholder="最大值" type="number" clearable class="num_input">
        </el-input>
      </el-form-item>
      <el-form-item label="抄表时间：">
        <el-date-picker class="form_input" v-model="search.startTime" value-format="yyyy-MM-dd" placeholder="开始日期"
          :editable="false"></el-date-picker>-
        <el-date-picker class="form_input" v-model="search.endTime" value-format="yyyy-MM-dd" placeholder="结束日期"
          :editable="false"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- /查询条件 -->
    <PagesTable ref="child" :tableMaxHeight="tableHeight" :tableExportPrinting="true" :tableID="tableId"
      :isTableTitle="false" :tableTitle="tableTitle" :border="tableBorder" :isIndex="true" :tableHeader="tableHeader"
      :tableData="tableData" :tableOperation="tableOperation" :tablePagination="tablePagination"
      @pageSize="pageSizeChange" @currentPage="currentPageChange" @pageOperation="handlePageOperation"
      @getTableAllData="getTableAllData" />
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        tableHeight: "",
        search: {
          //搜索条件
          meterID: "",
          meterUserName: "",
          villageID: "",
          waterRateID: "",
          readerName: "",
          meterReadingRecordStatus: "",
          period: "",
          currWaterCountMin: "",
          currWaterCountMax: "",
          startTime: "",
          endTime: ""
        },
        villageList: [{
            villageName: "新华巷",
            villageID: 28
          },
          {
            villageName: "朝阳路东",
            villageID: 29
          },
          {
            villageName: "朝阳路西",
            villageID: 32
          },
          {
            villageName: "党校后",
            villageID: 33
          },
          {
            villageName: "鸳鸯楼",
            villageID: 34
          },
          {
            villageName: "人大单元楼",
            villageID: 35
          },
          {
            villageName: "老干部单元楼",
            villageID: 36
          },
          {
            villageName: "水泉崖",
            villageID: 38
          },
          {
            villageName: "民政局宿舍",
            villageID: 40
          },
          {
            villageName: "总表（吴）",
            villageID: 41
          },
          {
            villageName: "富康家园",
            villageID: 42
          },
          {
            villageName: "教委单元楼",
            villageID: 45
          },
          {
            villageName: "德和盛嘉园",
            villageID: 95
          }
        ], //小区列表
        villageListCopy: [{
            villageName: "新华巷",
            villageID: 28
          },
          {
            villageName: "朝阳路东",
            villageID: 29
          },
          {
            villageName: "朝阳路西",
            villageID: 32
          },
          {
            villageName: "党校后",
            villageID: 33
          },
          {
            villageName: "鸳鸯楼",
            villageID: 34
          },
          {
            villageName: "人大单元楼",
            villageID: 35
          },
          {
            villageName: "老干部单元楼",
            villageID: 36
          },
          {
            villageName: "水泉崖",
            villageID: 38
          },
          {
            villageName: "民政局宿舍",
            villageID: 40
          },
          {
            villageName: "总表（吴）",
            villageID: 41
          },
          {
            villageName: "富康家园",
            villageID: 42
          },
          {
            villageName: "教委单元楼",
            villageID: 45
          },
          {
            villageName: "德和盛嘉园",
            villageID: 95
          }
        ], //小区列表原始数据
        meterReaderList: [{
            name: "白明常"
          },
          {
            name: "吴春德"
          },
          {
            name: "田建功"
          },
        ], //抄表员列表
        waterRateList: [{
          waterRateName: "生活用水",
          waterRateID: "1"
        }, {
          waterRateName: "居民用水",
          waterRateID: "2"
        }, {
          waterRateName: "特种用水",
          waterRateID: "3"
        }, {
          waterRateName: "非居民用水",
          waterRateID: "4"
        }, {
          waterRateName: "非生活用水",
          waterRateID: "5"
        }], //用水类型列表
        // 收费状态列表
        statusList: [{
            name: "未结算",
            id: 1
          },
          {
            name: "已结算",
            id: 2
          }
        ],
        tableId: "meterReadingRecord",
        tableTitle: "抄表记录",
        tableBorder: true,
        tableHeader: [
          // {
          //   name: "用户编号",
          //   mark: "userID",
          //   fixed: "left"
          // },
          // 实际为水表编号内容
          {
            name: "用户编号",
            mark: "meterID",
            fixed: "left"
          },
          {
            name: "用户姓名",
            mark: "name",
            fixed: "left"
          },
          {
            name: "手机号",
            mark: "phone",
            width: "105"
          },
          {
            name: "小区",
            mark: "villageName"
          },
          {
            name: "用水类型",
            mark: "waterRateName"
          },
          {
            name: "账期",
            mark: "period"
          },
          {
            name: "账单号",
            mark: "meterReadingRecordID"
          },
          {
            name: "上期底数",
            mark: "lastReadingValue"
          },
          {
            name: "本期底数",
            mark: "currReadingValue"
          },
          // {
          //   name: "计费底数",
          //   mark: "costReadingValue"
          // },
          // {
          //   name: "抵扣水量",
          //   mark: "readingFromDepositWater"
          // },
          {
            name: "用水量",
            mark: "currWaterCount"
          },
          {
            name: "水费",
            mark: "waterFee"
          },
          {
            name: "水资源税",
            mark: "tax"
          },
          {
            name: "污水费",
            mark: "effluentFee"
          },
          // {
          //   name: "滞纳金",
          //   mark: "lateFee"
          // },
          {
            name: "总水费",
            mark: "totalFee"
          },
          // {
          //   name: "总减免",
          //   mark: "totalWaiver"
          // },
          {
            name: "是否结算",
            mark: "meterReadingRecordStatus",
            list: {
              "-1": "作废",
              1: "未结算",
              2: "已结算", //手动结算
              3: "自动结算", //扣余额
              4: "自动结算", //扣水量
              5: "自动结算" //扣余额和水量
            }
          },
          {
            name: "抄表员",
            mark: "readerName"
          },
          {
            name: "抄表时间",
            mark: "recordTime",
            width: "160"
          },
          {
            name: "违约金时间",
            mark: "lateFeeOverTime",
            width: "160"
          },
          {
            name: "操作",
            mark: "",
            width: "90",
            fixed: "right"
          }
        ],
        tableOperation: [{
          name: "取消抄表",
          mark: "CancelReading",
          icon: false
        }],
        tablePagination: {
          show: true,
          current: 1,
          size: 10,
          total: 1
        },
        tableData: [{
          "readerName": "\u767d\u660e\u5e38",
          "waterFee": 9.6,
          "volumeName": "\u852c\u83dc\u516c\u53f8\u5bbf\u820d",
          "tax": 0.0,
          "period": "202107",
          "inputTime": "2024-07-16 10:33:05",
          "waterRateName": "\u751f\u6d3b\u7528\u6c34",
          "recordTime": "2024-07-16 10:33:05",
          "meterID": 1,
          "totalFee": 13,
          "meterReadingRecordStatus": 3,
          "otherFee": 0.0,
          "inputer": "\u51af\u5a1c",
          "meterReadingRecordID": 42240,
          "currReadingValue": 10,
          "currWaterCount": 4,
          "lateFeeOverTime": "2099-01-01 00:00:00",
          name: "白秀珍",
          phone: "13099046355",
          villageName: "新华书店宿舍",
          "lastReadingValue": 6,
          "effluentFee": 3.4,
          "villageDetail": "\u852c\u83dc\u516c\u53f8\u5bbf\u820d"
        }],
        searchAllParam: {}
      };
    },
    mounted() {
      const self = this;
      // self.getMeterReaderList();
      // self.getAllTypes();
      // self.getSearchData();
    },
    beforeDestroy() {},
    created() {
      var self = this;
      var height = $(document).height() - 173 - 205 - 50;
      self.tableHeight = height + "";
    },
    methods: {
      getMeterReaderList() {
        //抄表员列表
        const self = this;
        var param = {
          rid: 3
        };
        self.$axios.post("/service/bsSysuserInfoGet", param).then(res => {
          if (res.data.status === "success") {
            self.meterReaderList = res.data.res;
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      getAllTypes() {
        //获取全部基础数据列表
        const self = this;
        var param = {
          types: "all"
        };
        self.$axios.post("/service/bsSelectListGet", param).then(res => {
          if (res.data.status === "success") {
            var tmp = res.data.res;
            //用水类型列表
            self.waterRateList = tmp.waterRate;
            //小区列表
            self.villageList = tmp.village;
            //保留数据源
            self.villageListCopy = Object.assign(self.villageList);
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      //小区搜索
      villageFilter(txt) {
        //对绑定数据赋值
        this.villageList = this.villageListCopy.filter(item => {
          if (
            item.villageName.indexOf(txt) !== -1 ||
            item.sx.indexOf(txt) !== -1 ||
            item.qp.indexOf(txt) !== -1
          ) {
            return true;
          }
        });
      },
      //小区列表还原（当 input 获得焦点时触发）
      villageFocus() {
        this.villageList = this.villageListCopy;
      },
      getSearchData() {
        const self = this;
        self.tableData = [];
        self.tablePagination.total = 0;
        self.tablePagination.current = 1;
        self.tablePagination.size = 10;
        self.handleTableData();
      },
      handleTableData() {
        //获取抄表记录
        const self = this;
        var param = {
          pageNum: self.tablePagination.current,
          pageSize: self.tablePagination.size
        };
        self.searchAllParam = {}
        if (self.search.meterID) {
          // param.userID = self.search.userID;
          param.meterID = self.search.meterID; //实际为水表编号查询
          self.searchAllParam.meterID = self.search.meterID; //实际为水表编号查询
        }
        if (self.search.meterUserName) {
          param.meterUserName = self.search.meterUserName;
          self.searchAllParam.meterUserName = self.search.meterUserName;
        }
        if (self.search.villageID) {
          param.villageID = self.search.villageID;
          self.searchAllParam.villageID = self.search.villageID;
        }
        if (self.search.waterRateID) {
          param.waterRateID = self.search.waterRateID;
          self.searchAllParam.waterRateID = self.search.waterRateID;
        }
        if (self.search.readerName) {
          param.readerName = self.search.readerName;
          self.searchAllParam.readerName = self.search.readerName;
        }
        if (self.search.meterReadingRecordStatus) {
          param.meterReadingRecordStatus = self.search.meterReadingRecordStatus;
          self.searchAllParam.meterReadingRecordStatus = self.search.meterReadingRecordStatus;
        }
        if (self.search.period) {
          param.period = self.search.period;
          self.searchAllParam.period = self.search.period;
        }
        if (self.search.startTime && self.search.endTime) {
          param.startTime = self.search.startTime;
          param.endTime = self.search.endTime;
          self.searchAllParam.startTime = self.search.startTime;
          self.searchAllParam.endTime = self.search.endTime;
        } else if (self.search.startTime || self.search.endTime) {
          self.$message.error("抄表时间查询需要选择开始日期及结束日期！");
          return;
        }
        if (self.search.currWaterCountMin) {
          param.currWaterCountMin = self.search.currWaterCountMin;
          self.searchAllParam.currWaterCountMin = self.search.currWaterCountMin;
        }
        if (self.search.currWaterCountMax) {
          param.currWaterCountMax = self.search.currWaterCountMax;
          self.searchAllParam.currWaterCountMax = self.search.currWaterCountMax;
        }
        self.$axios
          .post("/service/bsMeterReadingPaydRecordGetZ", param)
          .then(res => {
            if (res.data.status === "success") {
              self.tableData = res.data.res;
              self.tablePagination.total = res.data.total;
            } else {
              self.$message.error(res.data.res);
            }
          });
      },
      pageSizeChange(data) {
        const self = this;
        self.tablePagination.size = data;
        self.handleTableData();
      },
      currentPageChange(data) {
        const self = this;
        self.tablePagination.current = data;
        self.handleTableData();
      },
      handlePageOperation(row, mark) {
        if (mark == "CancelReading") {
          //取消抄表
          this.$confirm("确定要取消此抄表记录吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
            .then(() => {
              if (row.meterReadingRecordStatus == 1) {
                //未结算
                this.meterReadingCancel(row.meterReadingRecordID);
              } else if (row.meterReadingRecordStatus == 2) {
                //已结算
                this.$message.error("请在 收费管理-收费记录 中取消收费");
              } else {
                //自动结算
                this.userPayingCancel(row.userPayingRecordID);
              }
            })
            .catch(() => {});
        }
      },
      meterReadingCancel(id) {
        //取消抄表
        var self = this;
        var param = {
          meterReadingRecordID: id
        };
        self.$axios.post("/service/bsMeterReadingCancel", param).then(res => {
          if (res.data.status === "success") {
            self.$message.success(res.data.res);
            self.getSearchData();
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      userPayingCancel(id) {
        //取消收费
        var self = this;
        var param = {
          userPayingRecordID: id
        };
        self.$axios.post("/service/bsUserPayingCancel", param).then(res => {
          if (res.data.status === "success") {
            self.$message.success(res.data.res);
            self.getSearchData();
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      getTableAllData(text) {
        var self = this;
        self.$axios
          .post("/service/bsMeterReadingPaydRecordGetZ", self.searchAllParam)
          .then(res => {
            if (res.data.status === "success") {
              if (text == 'export') {
                self.$refs.child.exportAllToExcel(res.data.res);
              } else if (text == 'print') {
                self.$refs.child.printAllData(res.data.res);
              }
            } else {
              self.$message.error(res.data.res);
            }
          });
      }
    }
  };
</script>
<style lang="scss">
  .form_input {
    width: 217px !important;
  }

  .num_input {
    width: 90px;

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    input[type="number"] {
      text-align: center;
    }
  }
</style>